<template>
    <div class ='newslistContainer'>
        		<div id="slider" class="mui-slider ">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							推荐
						</a>
						<a class="mui-control-item" href="#item2mobile">
							热点
						</a>
						<a class="mui-control-item" href="#item3mobile">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile">
							社会
						</a>
						<a class="mui-control-item" href="#item5mobile">
							娱乐
						</a>
						<a class="mui-control-item" href="#item6mobile">
							科技
						</a>
					</div>
					</div>
				</div>
                <ul>
                    <router-link to="newslist/newsinfo" tag="li">
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4178823204,3960859163&fm=58&bpow=1200&bpoh=1800" alt="">
                        <div class="box">
                            <p>这是一大顿描述文字</p>
                            <p>这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                            </p>
                        </div>
                    </router-link>
                    <li>
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4178823204,3960859163&fm=58&bpow=1200&bpoh=1800" alt="">
                        <div class="box">
                            <p>这是一大顿描述文字</p>
                            <p>这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4178823204,3960859163&fm=58&bpow=1200&bpoh=1800" alt="">
                        <div class="box">
                            <p>这是一大顿描述文字</p>
                            <p>这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4178823204,3960859163&fm=58&bpow=1200&bpoh=1800" alt="">
                        <div class="box">
                            <p>这是一大顿描述文字</p>
                            <p>这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4178823204,3960859163&fm=58&bpow=1200&bpoh=1800" alt="">
                        <div class="box">
                            <p>这是一大顿描述文字</p>
                            <p>这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4178823204,3960859163&fm=58&bpow=1200&bpoh=1800" alt="">
                        <div class="box">
                            <p>这是一大顿描述文字</p>
                            <p>这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                                这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字这是一大顿描述文字
                            </p>
                        </div>
                    </li>
                </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {}
    },
      mounted() {
    // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
    // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
    // 2. 初始化滑动控件
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    })
      }
}
</script>

<style lang="less" scoped>
.newslistContainer {
    ul{
        list-style:none;
        margin:5px;
        padding:0;
        li{
            cursor: pointer;
            position:relative;
            padding-bottom:10px;
            img{
                width:100%;
                height:300px;
            }
            .box{
                position:absolute;
                bottom:0;
                background:rgba(0,0,0,.4);
                p{
                    padding:0;
                    margin:0;
                    color:#fff;
                }
            }
        }
    }
}
</style>
